<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="container" id="container">
        <div class="list" style="left:-600px" id="list">
            <img src="images/05.png" alt="">
            <img src="images/01.png" alt="">
            <img src="images/02.png" alt="">
            <img src="images/03.png" alt="">
            <img src="images/04.png" alt="">
            <img src="images/05.png" alt="">
            <img src="images/01.png" alt="">
        </div>
        <button id="prev"></button>
        <button id="next"></button>
        <div id="btns">
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

<script>
    var container=document.getElementById("container");
    var list=document.getElementById("list");
    var prev=document.getElementById("prev");
    var next=document.getElementById("next");
    var btns=document.getElementById("btns").children;
    var index=0;
    // 1.点击左右按钮
    next.onclick=function(){
        index++;
        if(index>4){
            index=0;
        }
        for(let i=0;i<btns.length;i++){
            btns[i].classList.remove("current");
        }
        btns[index].classList.add("current");
        animate(-600)
    }
    prev.onclick=function(){
        index--;
        if(index<0){
            index=4;
        }
        for(let i=0;i<btns.length;i++){
            btns[i].classList.remove("current");
        }
        btns[index].classList.add("current");
        animate(600)
    }
    function animate(offset){
        let newLeft=parseInt(list.style.left)+offset;
        if(newLeft>-600){
            list.style.left=-3000+"px";
        }else if(newLeft<-3000){
            list.style.left=-600+"px";
        }else{
            list.style.left=newLeft+"px";
        }
    }
</script>